import { ref } from "vue"
export default {
    name: 'BaseTree', 
    props: { 
        treeData: {
            type: Array,
            default: () => []
        } 
    },
    setup(props, {emit}){
        const checked = ref('1')
        const activeNames = ref(['1']) 
        const checkClick = (id, name) => {
            checked.value = id
            emit('getData', id, name)
        }
        const child = (children, name, id) => { 
            return (
                <div>
                    {
                        children? 
                        <van-collapse-item title={name} name={id}>
                            { children.map(node => {
                            const childs = (node.children && node.children.length > 0) ? node.children : null
                            return child(childs, node.name, node.id)
                        })}</van-collapse-item>: 
                        <div class="check-box" onClick={() => checkClick(id, name)}> 
                            <div>{name}</div>
                            <van-radio name={id}/>
                        </div>
                    }
                </div>
            )
        }
        return () => (
          <van-radio-group v-model={checked.value}>
              {
                  props.treeData.map( node => {
                      if (node.children){
                        return  (
                            <van-collapse v-model={activeNames.value}>
                                {child(node.children, node.name, node.id)}
                            </van-collapse>
                        )    
                      }
                  })
              }
          </van-radio-group>
        )
    }
}